<template>
    <div>
        <div class="m-2">
            <a-tabs v-model:activeKey="activeKey" @change="changeTab">
                <a-tab-pane key="1" tab="本月">
                    <div>
                        <div class="text-center mb-2">
                            <a-button-group>
                                <a-button type="primary" @click="lastDate">
                                    <LeftOutlined />
                                    上月
                                </a-button>
                                <a-button type="primary" @click="nextDate">
                                    <RightOutlined />
                                    下月
                                </a-button>
                                <a-button type="dashed" @click="reset">重置</a-button>
                            </a-button-group>
                        </div>
                        <a-row :gutter="[12, 2]" class="mb-2">
                            <a-col :span="12">
                                <div class="rounded-sm text-white text-center p-4 bg-gradient-to-r from-cyan-500 to-blue-500
                     shadow-lg shadow-indigo-500/5 border-gray-100 h-48 ">
                                    <p class="text-2xl">销售统计</p>
                                    <div class="flex justify-between items-center">
                                        <p class="text-md">团课：{{ dataState.sale.groupsaleAmount }}节</p>
                                        <p class="text-md">私教：{{ dataState.sale.personalsaleAmount }}节</p>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <p class="text-md">团课：{{ dataState.sale.groupsalePrice }}元</p>
                                        <p class="text-md">私课：{{ dataState.sale.personalsalePrice }}元</p>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <p class="text-md">团课：{{ dataState.sale.groupsaleCount }}单</p>
                                        <p class="text-md">私课：{{ dataState.sale.personalsaleCount }}单</p>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="12">
                                <div class="rounded-sm text-white text-center p-4  bg-gradient-to-r from-violet-500 to-fuchsia-500
                     shadow-lg shadow-indigo-500/5 border-gray-100 h-48">
                                    <p class="text-xl">约课统计</p>
                                    <div class="flex justify-between items-center px-8">
                                        <p>团课：{{ dataState.appointment.groupappointmentCount }}次</p>
                                        <p>私课：{{ dataState.appointment.personalappointmentCount }}次</p>
                                    </div>
                                </div>
                            </a-col>

                        </a-row>
                        <a-row :gutter="[12, 2]" class="mb-2">
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="团体课" :value="dataState.course.groupcoursesCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="私教课" :value="dataState.course.personalcoursesCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">课程统计</a-divider>

                                </a-card>
                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="团体课" :value="dataState.schedule.groupscheduleCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="私教课" :value="dataState.schedule.personalscheduleCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">课程排期</a-divider>

                                </a-card>
                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="团体课" :value="dataState.sign.groupsignCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="私教课" :value="dataState.sign.personalsignCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">签到统计</a-divider>
                                </a-card>

                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="课程" :value="dataState.activity.activityCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="金额" :value="dataState.activity.activityAmount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">活动统计</a-divider>
                                </a-card>
                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="正式会员" :value="dataState.user.userVipCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="潜在会员" :value="dataState.user.userNormalCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">会员统计</a-divider>
                                </a-card>

                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="员工" :value="dataState.employee.employeeCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="共计上课" :value="dataState.employee.employeeGivenCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">员工统计</a-divider>
                                </a-card>
                            </a-col>
                        </a-row>

                        <a-row :gutter="[12, 2]" class="mb-2 mt-2">
                            <a-col :span="12">
                                <a-card title="销售" hoverable>
                                    <div class="echarts-box">
                                        <div id="myEcharts1" :style="{ width: '100%', height: '300px' }"></div>
                                    </div>
                                </a-card>
                            </a-col>
                            <a-col :span="12">
                                <a-card title="约课" hoverable>

                                    <div class="echarts-box">
                                        <div id="myEcharts2" :style="{ width: '100%', height: '300px' }"></div>
                                    </div>
                                </a-card>
                            </a-col>
                        </a-row>


                    </div>

                </a-tab-pane>
                <a-tab-pane key="2" tab="累计" force-render>
                    <div class="p-2">
                        <a-row :gutter="[12, 2]" class="mb-2">
                            <a-col :span="12">
                                <div class="rounded-sm text-white text-center p-4 bg-gradient-to-r from-cyan-500 to-blue-500
                     shadow-lg shadow-indigo-500/5 border-gray-100 h-48 ">
                                    <p class="text-2xl">销售统计</p>
                                    <div class="flex justify-between items-center">
                                        <p class="text-md">团课：{{ dataState.sale.groupsaleAmount }}节</p>
                                        <p class="text-md">私教：{{ dataState.sale.personalsaleAmount }}节</p>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <p class="text-md">团课：{{ dataState.sale.groupsalePrice }}元</p>
                                        <p class="text-md">私课：{{ dataState.sale.personalsalePrice }}元</p>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <p class="text-md">团课：{{ dataState.sale.groupsaleCount }}单</p>
                                        <p class="text-md">私课：{{ dataState.sale.personalsaleCount }}单</p>
                                    </div>
                                </div>
                            </a-col>
                            <a-col :span="12">
                                <div class="rounded-sm text-white text-center p-4  bg-gradient-to-r from-violet-500 to-fuchsia-500
                     shadow-lg shadow-indigo-500/5 border-gray-100 h-48">
                                    <p class="text-xl">约课统计</p>
                                    <div class="flex justify-between items-center px-8">
                                        <p>团课：{{ dataState.appointment.groupappointmentCount }}次</p>
                                        <p>私课：{{ dataState.appointment.personalappointmentCount }}次</p>
                                    </div>
                                </div>
                            </a-col>

                        </a-row>
                        <a-row :gutter="[12, 2]" class="mb-2">
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="团体课" :value="dataState.course.groupcoursesCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="私教课" :value="dataState.course.personalcoursesCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">课程统计</a-divider>

                                </a-card>
                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="团体课" :value="dataState.schedule.groupscheduleCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="私教课" :value="dataState.schedule.personalscheduleCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">课程排期</a-divider>

                                </a-card>
                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="团体课" :value="dataState.sign.groupsignCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="私教课" :value="dataState.sign.personalsignCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">签到统计</a-divider>
                                </a-card>

                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="课程" :value="dataState.activity.activityCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="金额" :value="dataState.activity.activityAmount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">活动统计</a-divider>
                                </a-card>
                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="正式会员" :value="dataState.user.userVipCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="潜在会员" :value="dataState.user.userNormalCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">会员统计</a-divider>
                                </a-card>

                            </a-col>
                            <a-col :span="4">
                                <a-card hoverable>
                                    <a-statistic title="员工" :value="dataState.employee.employeeCount"
                                        style="margin-right: 50px" />
                                    <a-statistic title="共计上课" :value="dataState.employee.employeeGivenCount"
                                        style="margin-right: 50px" />
                                    <a-divider orientation="left">员工统计</a-divider>
                                </a-card>
                            </a-col>
                        </a-row>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script setup lang="ts">
import initEChart1 from './echarts/echarts1'
import initEChart2 from './echarts/echarts2'
import dayjs from 'dayjs'
let monthStr = ref(dayjs().format('YYYY-MM'))
const { indexDashboard, dataState } = useDashboard();
const initData = async () => {
    await indexDashboard(monthStr.value)
    initEChart1(dataState.value.chartData.chartGSaleData, dataState.value.chartData.chartPSaleData)
    initEChart2(dataState.value.chartData.chartGApptData, dataState.value.chartData.chartPApptData)
}

onMounted(() => {
    initData()
})
const reset = () => {
    monthStr.value = dayjs().format('YYYY-MM')
    initData()
}
const lastDate = () => {
    //获取上月
    let lastMonth = dayjs(monthStr.value).subtract(1, 'month').format('YYYY-MM')
    monthStr.value = lastMonth
    initData()
}
const nextDate = () => {
    //获取下月
    let nextMonth = dayjs(monthStr.value).add(1, 'month').format('YYYY-MM')
    monthStr.value = nextMonth
    initData()
}
const activeKey = ref("1")
//查看所有
const changeTab=(val)=>{
    if(val==2){
        initAll()
        let chartEl = document.querySelector("#myEcharts1")
        if (chartEl) {
            //刷新图表数据
            initEChart1(dataState.value.chartData.chartGSaleData, dataState.value.chartData.chartPSaleData)
        }
        let chartEl2 = document.querySelector("#myEcharts2")
        if (chartEl2) {
            //刷新图表数据
            initEChart2(dataState.value.chartData.chartGApptData, dataState.value.chartData.chartPApptData)
        }
    }
    if(val==1){
        initData()
    }
}
const initAll = async () => {
    await indexDashboard("")
}
</script>

<style scoped></style>